<template>
  <!--设置一个控件选项和其他控件的联动，设置需要显示的控件-->
  <el-radio-group
    v-model="optionValue"
    :id="'c' + columnId"
    :name="'c' + columnId"
    size="mini"
  >
    <el-radio
      v-for="item in optionList"
      :key="'radio' + columnId + item.value"
      :label="item.value"
    >
      {{item.label}}
    </el-radio>
  </el-radio-group>
  <!--操作，全选，删除-->
  <div>
    <el-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      >Check all</el-checkbox
    >&nbsp;&nbsp;&nbsp;
    <el-button type="" @click="del" size="mini" >删除联动</el-button>
  </div>
  <!--显示表单控件的字段，设置关联关系-->
  <el-checkbox-group v-if="optionValue > 0"
    v-model="checkValue2"
    size="mini"
  >
    <el-checkbox style="width: 120px;"
      v-for="(item, index) in colOrder"
      :key="index"
      :label="item"
    >
      {{itemMeta[item].label}}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script lang="ts">
/* eslint-disable vue/no-setup-props-destructure */
  import { defineComponent, computed, ref } from 'vue'
  import { ElRadioGroup, ElRadio, ElCheckbox, ElCheckboxGroup } from 'element-plus'

  export default defineComponent({
    name: 'nf-meta-help-form-item-linkage',
    components: {
      ElRadioGroup, ElRadio, ElCheckbox, ElCheckboxGroup
    },
    props: {
      formMeta: [Object],
      columnId: Number // 主控件
    },
    setup(props, context) {

      const { itemMeta } = props.formMeta
      const { linkageMeta, colOrder } = props.formMeta.formMeta

      // 发起者的选项列表
      const optionList = computed( () => {
        if (itemMeta[props.columnId].optionList) {
          return itemMeta[props.columnId].optionList
        } else {
          return []
        }
      })

      // 发起者选了哪个选项
      const optionValue = ref(0)

      const checkValue2 = computed({
        set: (val) => {
          if (linkageMeta[props.columnId]) {
            if (linkageMeta[props.columnId][optionValue.value]) {
              // 有联动，清空重新设置
              linkageMeta[props.columnId][optionValue.value].length = 0
              linkageMeta[props.columnId][optionValue.value].push(...val)
            } else {
              // 没有联动，添加新的
              linkageMeta[props.columnId][optionValue.value] = val
            }
          } else {
            // 没有联动，添加新的
            linkageMeta[props.columnId] = {}
            linkageMeta[props.columnId][optionValue.value] = val
          }
        },
        get: () => {
          if (linkageMeta[props.columnId]) {
            return linkageMeta[props.columnId][optionValue.value] ?? []
          } else {
            return []
          }
        }
      })

      // 设置全选
      const isIndeterminate = ref(false)
      const checkAll = computed({
        set: (val) => {
          console.log(val, 6)
          checkValue2.value.length = 0
          if (val) {
            // 全选
            checkValue2.value.push(...colOrder)
          }
        },
        get: () => {
          const re = checkValue2.value.length === colOrder.length
          if (re) {
            isIndeterminate.value = false
          } else {
            if (checkValue2.value.length > 0) 
              isIndeterminate.value = true
          }
          return re
        }
      })

      // 删除联动
      const del = () => {
        delete linkageMeta[props.columnId]
      }
      
      return {
        itemMeta,
        optionList,
        checkAll,
        optionValue,
        checkValue2,
        isIndeterminate,
        del
      }
    }
  })
</script>